// 页面过渡动效组件
Component({
  properties: {
    // 过渡类型
    transitionType: {
      type: String,
      value: 'slide', // slide, fade, scale, flip, cube, stack
    },
    // 过渡方向
    direction: {
      type: String,
      value: 'right', // left, right, up, down
    },
    // 动画时长
    duration: {
      type: Number,
      value: 300,
    },
    // 缓动函数
    timingFunction: {
      type: String,
      value: 'ease-out',
    },
    // 是否显示
    show: {
      type: Boolean,
      value: true,
      observer: 'onShowChange',
    },
    // 主题
    theme: {
      type: String,
      value: 'default',
    },
    // 自定义样式类
    customClass: {
      type: String,
      value: '',
    },
    // 是否启用3D效果
    enable3D: {
      type: Boolean,
      value: false,
    },
    // 背景遮罩
    mask: {
      type: Boolean,
      value: false,
    },
  },

  data: {
    animationData: {},
    maskAnimationData: {},
    isAnimating: false,
    currentState: 'hidden', // hidden, showing, shown, hiding
  },

  lifetimes: {
    attached() {
      this.initAnimation();
      if (this.data.show) {
        this.showTransition();
      }
    },
  },

  methods: {
    // 初始化动画
    initAnimation() {
      this.animation = wx.createAnimation({
        duration: this.data.duration,
        timingFunction: this.data.timingFunction,
        transformOrigin: 'center center',
      });

      this.maskAnimation = wx.createAnimation({
        duration: this.data.duration,
        timingFunction: this.data.timingFunction,
      });

      this.resetAnimation();
    },

    // 重置动画
    resetAnimation() {
      const { transitionType, direction } = this.data;
      
      switch (transitionType) {
        case 'slide':
          this.resetSlideAnimation(direction);
          break;
        case 'fade':
          this.resetFadeAnimation();
          break;
        case 'scale':
          this.resetScaleAnimation();
          break;
        case 'flip':
          this.resetFlipAnimation(direction);
          break;
        case 'cube':
          this.resetCubeAnimation(direction);
          break;
        case 'stack':
          this.resetStackAnimation();
          break;
        default:
          this.resetSlideAnimation(direction);
      }

      if (this.data.mask) {
        this.maskAnimation.opacity(0).step({ duration: 0 });
        this.setData({
          maskAnimationData: this.maskAnimation.export(),
        });
      }
    },

    // 重置滑动动画
    resetSlideAnimation(direction) {
      const transforms = {
        left: 'translateX(-100%)',
        right: 'translateX(100%)',
        up: 'translateY(-100%)',
        down: 'translateY(100%)',
      };
      
      const transform = transforms[direction] || transforms.right;
      this.animation.opacity(0).step({ duration: 0 });
      this.animation.transform(transform).step({ duration: 0 });
      
      this.setData({
        animationData: this.animation.export(),
      });
    },

    // 重置淡入动画
    resetFadeAnimation() {
      this.animation.opacity(0).step({ duration: 0 });
      
      this.setData({
        animationData: this.animation.export(),
      });
    },

    // 重置缩放动画
    resetScaleAnimation() {
      this.animation.opacity(0).scale(0.8).step({ duration: 0 });
      
      this.setData({
        animationData: this.animation.export(),
      });
    },

    // 重置翻转动画
    resetFlipAnimation(direction) {
      const rotations = {
        left: 'rotateY(-90deg)',
        right: 'rotateY(90deg)',
        up: 'rotateX(-90deg)',
        down: 'rotateX(90deg)',
      };
      
      const rotation = rotations[direction] || rotations.right;
      this.animation.opacity(0).step({ duration: 0 });
      this.animation.transform(rotation).step({ duration: 0 });
      
      this.setData({
        animationData: this.animation.export(),
      });
    },

    // 重置立方体动画
    resetCubeAnimation(direction) {
      const transforms = {
        left: 'translateX(-100%) rotateY(-90deg)',
        right: 'translateX(100%) rotateY(90deg)',
        up: 'translateY(-100%) rotateX(-90deg)',
        down: 'translateY(100%) rotateX(90deg)',
      };
      
      const transform = transforms[direction] || transforms.right;
      this.animation.opacity(0).step({ duration: 0 });
      this.animation.transform(transform).step({ duration: 0 });
      
      this.setData({
        animationData: this.animation.export(),
      });
    },

    // 重置堆叠动画
    resetStackAnimation() {
      this.animation.opacity(0).scale(0.9).translateY('10%').step({ duration: 0 });
      
      this.setData({
        animationData: this.animation.export(),
      });
    },

    // 显示过渡
    showTransition() {
      if (this.data.isAnimating || this.data.currentState === 'shown') return;
      
      this.setData({ 
        isAnimating: true,
        currentState: 'showing',
      });
      
      this.triggerEvent('transitionstart', { type: 'show' });
      
      // 显示遮罩
      if (this.data.mask) {
        this.maskAnimation.opacity(0.5).step();
        this.setData({
          maskAnimationData: this.maskAnimation.export(),
        });
      }
      
      // 执行显示动画
      this.animation.opacity(1).step({ duration: 0 });
      this.animation.transform('translate(0, 0) scale(1) rotate(0)').step();
      
      this.setData({
        animationData: this.animation.export(),
      });
      
      setTimeout(() => {
        this.setData({ 
          isAnimating: false,
          currentState: 'shown',
        });
        this.triggerEvent('transitionend', { type: 'show' });
      }, this.data.duration);
    },

    // 隐藏过渡
    hideTransition() {
      if (this.data.isAnimating || this.data.currentState === 'hidden') return;
      
      this.setData({ 
        isAnimating: true,
        currentState: 'hiding',
      });
      
      this.triggerEvent('transitionstart', { type: 'hide' });
      
      // 隐藏遮罩
      if (this.data.mask) {
        this.maskAnimation.opacity(0).step();
        this.setData({
          maskAnimationData: this.maskAnimation.export(),
        });
      }
      
      // 执行隐藏动画
      this.resetAnimation();
      
      setTimeout(() => {
        this.setData({ 
          isAnimating: false,
          currentState: 'hidden',
        });
        this.triggerEvent('transitionend', { type: 'hide' });
      }, this.data.duration);
    },

    // 监听显示状态变化
    onShowChange(newVal, oldVal) {
      if (newVal === oldVal) return;
      
      if (newVal) {
        this.showTransition();
      } else {
        this.hideTransition();
      }
    },

    // 切换显示状态
    toggle() {
      this.setData({
        show: !this.data.show,
      });
    },

    // 遮罩点击事件
    onMaskTap() {
      this.triggerEvent('masktap');
    },

    // 内容点击事件
    onContentTap(e) {
      e.stopPropagation();
      this.triggerEvent('contenttap');
    },

    // 外部调用方法
    show() {
      this.setData({ show: true });
    },

    hide() {
      this.setData({ show: false });
    },

    // 自定义过渡
    customTransition(config) {
      if (this.data.isAnimating) return;
      
      const {
        opacity = 1,
        translateX = 0,
        translateY = 0,
        scale = 1,
        rotate = 0,
        duration = this.data.duration,
        timingFunction = this.data.timingFunction,
      } = config;
      
      this.setData({ isAnimating: true });
      
      const customAnimation = wx.createAnimation({
        duration,
        timingFunction,
      });
      
      customAnimation
        .opacity(opacity)
        .translateX(translateX)
        .translateY(translateY)
        .scale(scale)
        .rotate(rotate)
        .step();
      
      this.setData({
        animationData: customAnimation.export(),
      });
      
      setTimeout(() => {
        this.setData({ isAnimating: false });
        this.triggerEvent('customtransitionend');
      }, duration);
    },

    // 页面切换动画
    pageTransition(fromPage, toPage, direction = 'right') {
      const transitions = {
        slide: this.slidePageTransition,
        fade: this.fadePageTransition,
        scale: this.scalePageTransition,
        flip: this.flipPageTransition,
      };
      
      const transition = transitions[this.data.transitionType] || transitions.slide;
      transition.call(this, fromPage, toPage, direction);
    },

    // 滑动页面切换
    slidePageTransition(fromPage, toPage, direction) {
      const isLeft = direction === 'left';
      const fromTransform = isLeft ? 'translateX(-100%)' : 'translateX(100%)';
      const toTransform = isLeft ? 'translateX(100%)' : 'translateX(-100%)';
      
      // 设置初始状态
      toPage.animation.transform(toTransform).step({ duration: 0 });
      
      // 执行动画
      fromPage.animation.transform(fromTransform).step();
      toPage.animation.transform('translateX(0)').step();
      
      this.triggerEvent('pagetransition', {
        from: fromPage,
        to: toPage,
        direction,
      });
    },

    // 淡入淡出页面切换
    fadePageTransition(fromPage, toPage) {
      fromPage.animation.opacity(0).step();
      toPage.animation.opacity(1).step();
      
      this.triggerEvent('pagetransition', {
        from: fromPage,
        to: toPage,
        type: 'fade',
      });
    },

    // 缩放页面切换
    scalePageTransition(fromPage, toPage) {
      fromPage.animation.scale(0.8).opacity(0).step();
      toPage.animation.scale(1).opacity(1).step();
      
      this.triggerEvent('pagetransition', {
        from: fromPage,
        to: toPage,
        type: 'scale',
      });
    },

    // 翻转页面切换
    flipPageTransition(fromPage, toPage, direction) {
      const isHorizontal = direction === 'left' || direction === 'right';
      const rotation = isHorizontal ? 'rotateY(90deg)' : 'rotateX(90deg)';
      
      fromPage.animation.transform(rotation).step();
      toPage.animation.transform('rotate(0)').step();
      
      this.triggerEvent('pagetransition', {
        from: fromPage,
        to: toPage,
        type: 'flip',
        direction,
      });
    },
  },
});